<template>
    <div>
        <div id="top">
            <div><Img></Img></div>
            <div class="home">
              <div><canvas id="canvas" /> </div>
            </div>
        </div>
        <div id="botton">
            <div>
                <el-table :data="tableData" border style="width: 100%">
                    <el-table-column prop="name" label="品牌" width="180" />
                    <el-table-column prop="zaishou" label="在售" width="180" />
                    <el-table-column prop="kucun" label="库存" width="180" />
                    <el-table-column prop="xiaoliang" label="销量" />
                </el-table>
            </div>
            <div id="calendar">
                <el-calendar v-model="value" />
            </div>
        </div>
    </div>
</template>

<script>
import { init } from "@/assets/js/clock.js";
import axios from "axios";
import Img from "./img.vue";
export default {
    data() {
        return {
            ctx: {},
            obj: {
                width: 200,
                height: 200,
            },
            tableData: []
        };
    },
    mounted() {
        this.initCanvas();
        this.gettable();
    },
    methods: {
        initCanvas() {
            const canvas = document.querySelector("#canvas");
            this.ctx = canvas.getContext("2d");
            canvas.width = this.obj.width;
            canvas.height = this.obj.height;
            init(this.ctx, this.obj);
        },
        gettable() {
            axios.get("/api/getTable", {}).then(res => {
                this.tableData = res.data;
            });
        }
    },
    components: { Img }
}
</script>

<style  scoped>
#top {
    display: flex;
    height: 335px;
    width: 100%;
    /* border: 1px solid red; */
}

#top div {
    height: 100%;
    width: 50%;
}

#botton {
    display: flex;
    height: 400px;
    width: 100%;
    /* border: 1px solid rgb(81, 0, 255); */
}

#botton div {
    height: 100%;
    width: 50%;
}

.el-calendar {
    --el-calendar-cell-width: 40px;
}

.el-calendar__header {
    width: 380px;
}
.el-card{
    margin-left: 150px;
}
canvas{
    margin-left: 16px;
}
#calendar{
   padding-left: 200px;
}
#home{
    padding-left: 150px;
}
</style>